"use client"

import React, { useEffect } from "react";
import * as echarts from 'echarts';

interface IProps {
  name?: string,
  container: string,
  pred: number[],
  actual: number[],
}

const PredictGraph: React.FC<IProps> = ({ container, pred, actual }) => {
  useEffect(() => {
    console.log('在图表中查看预测和实际', pred, actual);
    
    let myChart = echarts.init(document.getElementById(container));
    let date = [];
    for (let index = 0; index < pred.length; index++) {
      date.push(index + 1 + '日')

    }
    myChart.setOption({
      legend: {
        y: '35px',
        textStyle: { //图例文字的样式
          color: 'blue',

        },
      },
      xAxis: {
        data: date,
        axisLine: {
          onZero: false    //-----------重点
      },
      },
      yAxis: {},
      series: [
        {
          smooth: true,
          name: 'Prediction',
          data: pred,
          type: 'line',
          // stack: 'x'
        },
        {
          smooth: true,
          name: 'Actual',
          data: actual,
          type: 'line',
          // stack: 'x'
        }
      ]
    })
    if (typeof window !== 'undefined') {
      window.addEventListener("resize", function (e) {
        myChart.resize();
      })
    } else {
      console.log('u are on the server~');

    }
  })

  return (
    <div>
      <div id={container} style={{ width: '800px', height: '800px' }} ></div>
    </div>
  )
}

export default PredictGraph;